<template>
  <div class="users">
    <div class="layout">
      <div class="search">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="$router.push('new')"
          >新增试题</el-button
        >
      </div>
      <el-form label-width="80px" class="layout-form">
        <el-row :gutter="20">
          <el-col :span="6"
            ><el-form-item label="学科">
              <el-select v-model="form.subjectID" placeholder="请选择">
                <el-option
                  v-for="(item, index) in subjectID"
                  :key="index"
                  :label="item.label"
                  :value="item.value" /></el-select></el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="二级目录">
              <el-select v-model="form.catalogID" placeholder="请选择">
                <el-option
                  v-for="(item, index) in catalogID"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="标签">
              <el-select v-model="form.tags" placeholder="请选择">
                <el-option
                  v-for="(item, index) in tags"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option> </el-select></el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="关键字">
              <el-input
                v-model="form.keyword"
                placeholder="根据题干搜索"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="试题类型">
              <el-select v-model="form.questionType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in questionType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="难度">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option
                  v-for="(item, index) in difficulty"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="方向">
              <el-select v-model="form.direction" placeholder="请选择">
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option></el-select></el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="录入人">
              <el-select v-model="form.creatorID" placeholder="请选择">
                <el-option
                  v-for="(item, index) in creator"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option></el-select></el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="题目备注">
              <el-input
                v-model="form.remarks"
                placeholder="根据备注搜索"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="企业简称">
              <el-input
                v-model="form.shortName"
                placeholder="根据企业简称搜索"
              ></el-input></el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="城市" class="el-form-item-sec">
              <el-select
                class="select-width"
                v-model="form.province"
                placeholder="请选择"
                @change="form.city = cityList[0]"
              >
                <el-option
                  v-for="(item, index) in provinceList"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="form.city"
                class="select-width"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in cityList"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option> </el-select></el-form-item
          ></el-col>
          <el-col :span="6">
            <div class="btn-style">
              <div></div>
              <div>
                <el-button @click="empty">清空</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <el-alert
    :counts="'共'+`${counts}`+'条记录'"
    type="info"
    show-icon>
  </el-alert>
      <!-- <InfoCount :counts="`共 ${counts} 条记录`" /> -->
      <el-table
        empty-text
        :data="list"
        style="width: 100%"
        class="table"
        v-loading="loading"
      >
        <el-table-column prop="number" label="试题编号" width="250">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="150">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="180">
        </el-table-column>
        <el-table-column prop="tags" label="题型" width="150">
          <template #default="{ row }"
            ><span>{{
              +row.difficulty === 1
                ? '单选'
                : +row.difficulty === 2
                ? '多选'
                : '简答'
            }}</span></template
          >
        </el-table-column>
        <el-table-column width="150" label="题干">
          <template #default="{ row }"
            ><span v-html="row.question"></span
          ></template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="250">
        </el-table-column>
        <el-table-column prop="remarks" label="难度" width="150">
          <template #default="{ row }"
            ><span>{{
              +row.questionType === 1
                ? '简单'
                : +row.questionType === 2
                ? '一般'
                : '困难'
            }}</span></template
          >
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="150">
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button
              type="info"
              icon="el-icon-view"
              circle
              @click="selectDetail(row.id)"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="$router.push({ path: 'new', query: { id: row.id } })"
            ></el-button>
            <el-button
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              @click="delItem(row.id)"
              circle
            ></el-button>
            <el-button
              type="success"
              class="el-icon-check"
              circle
              @click="setState(row, 1)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px; text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paramsObj.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="paramsObj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        background
        hide-on-single-page
      >
      </el-pagination>
      <el-dialog
        class="dialog-select"
        title="题目预览"
        :visible="selectDetailVisible"
        width="50%"
        @close="selectDetailVisible = false"
      >
        <el-descriptions :column="4">
          <el-descriptions-item label="【题型】"
            >{{
              +selectDetailData.difficulty === 1
                ? '单选'
                : +selectDetailData.difficulty === 2
                ? '多选'
                : '简答'
            }}题</el-descriptions-item
          >
          <el-descriptions-item label="【编号】">{{
            selectDetailData.id
          }}</el-descriptions-item>
          <el-descriptions-item label="【难度】">{{
            +selectDetailData.questionType === 1
              ? '简单'
              : +selectDetailData.questionType === 2
              ? '一般'
              : '困难'
          }}</el-descriptions-item>
          <el-descriptions-item label="【标签】">
            <el-tag size="small" v-if="selectDetailData.tags">{{
              selectDetailData.tags
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="【学科】">{{
            selectDetailData.subjectName
          }}</el-descriptions-item>
          <el-descriptions-item label="【目录】">{{
            selectDetailData.directoryName
          }}</el-descriptions-item>
          <el-descriptions-item label="【方向】">{{
            selectDetailData.direction
          }}</el-descriptions-item>
        </el-descriptions>
        <hr />
        <el-descriptions :column="1">
          <el-descriptions-item label="【题干】"
            ><span style="color: blue" v-html="selectDetailData.question"></span
          ></el-descriptions-item>
          <el-descriptions-item
            :label="`${
              +selectDetailData.difficulty === 1
                ? '单选'
                : +selectDetailData.difficulty === 2
                ? '多选'
                : '简答'
            }题 选项：（以下选中的选项为正确答案）`"
            ><br />
          </el-descriptions-item>
        </el-descriptions>
        <div
          :class="{ 'radio-color': !!item.isRight }"
          v-for="(item, index) in selectDetailData.options"
          :key="index"
        >
          {{ item.code }}.&nbsp;&nbsp;
          <el-radio
            :class="{ 'radio-color': !!item.isRight }"
            v-model="item.isRight"
            disabled
          >
          </el-radio>
          {{ item.title }}
        </div>
        <hr />
        <el-descriptions :column="1">
          <el-descriptions-item label="【参考答案】"
            ><el-button class="descriptions-btn" @click="flag = !flag"
              >视频答案预览</el-button
            >
          </el-descriptions-item>
        </el-descriptions>
        <video
          v-show="flag"
          style="width: 400px; height: 300px"
          :src="selectDetailData.videoURL"
          controls
        ></video>
        <hr />
        <el-descriptions :column="1">
          <el-descriptions-item label="【答案解析】"
            ><span v-html="selectDetailData.answer"></span
          ></el-descriptions-item>
        </el-descriptions>
        <hr />
        <el-descriptions :column="1">
          <el-descriptions-item label="【题目备注】">{{
            selectDetailData.remarks
          }}</el-descriptions-item>
        </el-descriptions>
        <div class="close">
          <div></div>
          <el-button type="primary" @click="selectDetailVisible = false"
            >关闭</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import {
  status,
  difficulty,
  questionType,
  direction
} from '@/api/hmmm/constants.js'
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      loading: false,
      selectDetailVisible: false,
      flag: false,
      paramsObj: {
        page: 1,
        pagesize: 10
      },
      form: {
        subjectID: '',
        difficulty: '',
        questionType: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: '',
        tags: ''
      },
      counts: 0,
      list: [],
      status,
      difficulty,
      questionType,
      direction,
      selectDetailData: {}
    }
  },
  computed: {
    provinceList () {
      return provinces()
    },
    cityList () {
      return citys(this.form.province)
    },
    creator () {
      return this.list.map(item => ({
        label: item.creator,
        value: item.creatorID
      }))
    },
    subjectID () {
      return this.list.map(item => ({
        label: item.subject,
        value: item.subjectID
      }))
    },
    catalogID () {
      return this.list.map(item => ({
        label: item.catalog,
        value: item.catalogID
      }))
    },
    tags () {
      return this.list.map(item => ({
        label: item.tags,
        value: item.tags
      }))
    }
  },
  created () {
    this.initTable()
  },

  methods: {
    async initTable () {
      this.loading = true
      const { data } = await list(this.paramsObj)
      this.counts = data.counts
      this.list = data.items
      this.list = data.items.map(item => {
        item.addDate = item.addDate.substring(0, 10) + '' + item.addDate.substring(11, 19)
        return item
      })
      this.loading = false
    },
    search () {
      this.paramsObj.page = 1
      for (const key in this.form) {
        if (this.form[key]) {
          this.paramsObj[key] = this.form[key]
        }
      }
      this.initTable()
    },
    empty () {
      this.paramsObj = {
        page: 1,
        pagesize: 10
      }
      this.form = {
        subjectID: '',
        difficulty: '',
        questionType: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: '',
        tags: ''
      }
      this.initTable()
    },
    handleSizeChange (val) {
      this.paramsObj.pagesize = val
      this.initTable()
    },
    handleCurrentChange (val) {
      this.paramsObj.page = val
      this.initTable()
    },
    async delItem (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(id)
          this.initTable()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async setState (data, choiceState) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          data = { ...data, choiceState }
          await choiceAdd(data)
          this.initTable()
          this.$message({
            type: 'success',
            message: '加入精选成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          })
        })
    },
    async selectDetail (id) {
      this.selectDetailVisible = true
      const { data } = await detail({ id })
      this.selectDetailData = data
    }
  }
}
</script>

<style scoped lang="less">
.users {
  padding: 10px 20px;
  .layout {
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .layout-form {
      ::v-deep .el-input--medium .el-input__inner {
        width: 316px;
        height: 32px;
      }
    }
    .search {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      span {
        color: pink;
        font-size: 12px;
      }
      ::v-deep .el-button.el-button--success.el-button--medium {
        width: 97px;
        height: 30px;
        padding: 0;
        font-size: 12px;
      }
    }
    .btn-style {
      display: flex;
      justify-content: space-between;
      .el-button {
        width: 56px;
        height: 32px;
        padding: 0 !important;
        font-size: 12px;
      }
    }
    .table {
      ::v-deep .is-leaf.el-table__cell {
        border-bottom: 2px solid #e8e8e8;
        color: #909399;
        font-weight: 600;
        background-color: #fafafa;
        text-align: center;
      }
      ::v-deep .el-table__cell {
        text-align: center;
      }
    }
    ::v-deep .select-width {
      .el-input__inner {
        width: 150px !important;
      }
      &:nth-child(2) {
        transform: translate(16px);
      }
    }
  }
  .dialog-chk {
    ::v-deep .el-form-item--medium:last-child .el-form-item__content {
      margin-bottom: 0;
      text-align: right !important;
    }
  }
  ::v-deep .el-descriptions-item {
    span p {
      margin: 0;
    }
  }
  ::v-deep .el-descriptions-item .descriptions-btn {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
    font-size: 12px;
    border-radius: 3px;
    padding: 9px 15px;
    margin-top: -5px;
  }
  ::v-deep hr {
    margin-bottom: 20px;
  }
  ::v-deep .radio-color {
    border-color: #409eff !important;
    color: #409eff !important;
    .el-radio__inner {
      background: #409eff !important;
    }
  }
  .close {
    display: flex;
    justify-content: space-between;
    .el-button {
      margin-top: 20px;
    }
  }
}
</style>
